<template>
	<view class="wrapper">
		<u--form labelPosition="top" :model="model1" :rules="rules" ref="form1" labelWidth="110">
			<div class="bfff">
				<u-form-item label="用户名" prop="name" borderBottom ref="item1">
					<u--input v-model="value1" placeholder="请输入内容" ></u--input>
				</u-form-item>
				<u-form-item label="车牌号" prop="name" borderBottom ref="item1">
					<u--input v-model="value1" placeholder="请输入内容" ></u--input>
				</u-form-item>
			</div>
			<u-button type="primary" text="保存" class="submit-btn"></u-button>
		</u--form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				range: [{
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
					{
						value: 2,
						text: "游泳"
					},
				],
				model1: {
					name: '',
					sex: ''
				},
				rules: {
					'name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
				},
			};
		}
	}
</script>

<style lang="scss">
	:deep(.u-textarea){
		background-color: #f5f7fb!important;
		border: 0;
		.u-textarea__field{
			height: 100px!important;
		}
	}
	:deep(.u-button--info) {
		height: 72rpx;
		background: #F5F5F5;
		border: 0;
	}

	:deep(.u-button--plain.u-button--primary) {
		height: 72rpx;
		background: rgba(64, 140, 255, 0.1);
	}

	:deep(.u-button) {
		margin-right: 28rpx;
	}

	.bfff {
		padding: 0 32rpx;
		margin-top: 24rpx;
	}
</style>